<template>
  <div class="container-box">
    <el-card style="max-width: 100%; margin-bottom: 20px;" shadow="hover">
      <template #header><span style="font-size: 15px; font-weight: bold;">图标下载</span></template>
      <div>
        <el-link href="https://www.iconfont.cn/" type="primary" target="_blank">iconfont-阿里巴巴矢量图标库</el-link>
        <br><span style="line-height: 40px;">下载 svg 格式的图标，然后粘贴至项目 src/icons/svg 目录下即可。</span>
      </div>
    </el-card>
    <el-card style="max-width: 100%" shadow="hover">
      <template #header><span style="font-size: 15px; font-weight: bold;">图标库</span></template>
      <div class="svg-grid">
        <div v-for="svg in svgList" :key="svg.name" class="svg-item" @click="copyIcon(svg.name)">
          <!-- <img :src="svg.url" :alt="svg.name" class="svg-icon" /> -->
          <svg-icon :icon="svg.name" class="svg-icon" />
          <span class="svg-name">{{ svg.name }}</span>
        </div>
      </div>
    </el-card>

  </div>


</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'


// 点击复制图标名称
const copyIcon = async (icon) => {
  try {
    await navigator.clipboard.writeText(icon);
    ElMessage({
      type: 'success',
      message: '复制成功，图标名称：' + icon
    })
  } catch (err) {
    console.error("复制失败", err);
    ElMessage({
      type: 'error',
      message: '复制失败!'
    })
  }
};

const svgList = ref([])
const loadSVGFiles = async () => {
  try {
    // 使用 import.meta.glob 获取所有 SVG 文件
    const modules = import.meta.glob('@/icons/svg/*.svg', {
      eager: true,
      import: 'default'
    })

    // 转换为文件列表
    svgList.value = Object.entries(modules).map(([filePath, module]) => {
      const fileName = filePath.split('/').pop() // 获取文件名
      const nameWithoutExt = fileName.replace('.svg', '')

      return {
        name: nameWithoutExt,
        path: filePath,
        url: module
      }
    })

  } catch (error) {
    console.error('加载 SVG 文件失败:', error)
  }
}

onMounted(() => {
  loadSVGFiles()
})
</script>

<style lang="scss" scoped>
.svg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  // padding: 10px;
}

.svg-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  transition: all 0.3s ease;
}

.svg-item:hover {
  cursor: pointer;
  transform: translateY(-2px);
  color: var(--el-color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.svg-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;

}

.svg-name {
  font-size: 12px;
  color: #666;
  text-align: center;
  word-break: break-all;
}
</style>
